import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Button, Divider, message, Tag } from 'antd';
import { page, remove, pause, resume, startNow } from '@/services/system/task';
import { EditOutlined, DeleteOutlined, PlayCircleOutlined, PauseCircleOutlined, RedoOutlined } from '@ant-design/icons';
import Confirm from '@/components/common/Confirm';
import { useState, useRef } from 'react';
import SystemTaskForm from './components/form';

const SystemTask = () => {

  const actionRef = useRef();
  const [formVisible, handleFormVisible] = useState(false);
  const [formValues, handleFormValues] = useState({});

  const usedStatusMap = {
    YES: { color: 'green', text: '启用', },
    NO: { color: 'red', text: '停用', }
  }

  const handleDelete = (record) => {
    Confirm.delete({
      content: `<p>名称为 <span style="color: #f60"> ${record.name} </span> 的任务将被删除</p><p>是否继续？</p>`,
      confirm: () => {
        remove(record.id).then((data) => {
          if (data.success) {
            if (actionRef.current) actionRef.current.reload();
            message.success('删除成功!');
          } else {
            message.error('删除失败!');
          }
        });
      },
    });
  };
  
  const handleRaise = () => {
    handleFormValues({});
    handleFormVisible(true);
  }

  const handleModify = (record) => {
    handleFormValues(record);
    handleFormVisible(true);
  }

  const handleStartNow = (record) => {
    Confirm.sure({
      content: `立即执行任务： <span style="color: #f60"> ${record.name} </span> `,
      confirm: () => {
        startNow(record).then((data) => {
          if (data.success) {
            message.success('任务已执行!');
          } else {
            message.error('执行失败!');
          }
        });
      },
    });
  }

  const handlePause = (record) => {
    Confirm.sure({
      content: `停用任务： <span style="color: #f60"> ${record.name} </span> `,
      confirm: () => {
        pause(record).then((data) => {
          if (data.success) {
            message.success('停用任务成功!');

            if (actionRef.current) actionRef.current.reload();
          } else {
            message.error('停用任务失败!');
          }
        });
      },
    });
  }

  const handleResume = (record) => {
    Confirm.sure({
      content: `启用任务： <span style="color: #f60"> ${record.name} </span> `,
      confirm: () => {
        resume(record).then((data) => {
          if (data.success) {
            message.success('启用任务成功!');

            if (actionRef.current) actionRef.current.reload();
          } else {
            message.error('启用任务失败!');
          }
        });
      },
    });
  }

  const columns = [
    { title: '任务分组', dataIndex: 'group', search: false,},
    { title: '任务名称', dataIndex: 'name', },
    { title: '执行规则', dataIndex: 'rule', search: false,},
    { title: '任务类名', dataIndex: 'className', search: false,},
    { 
      title: '启用状态', dataIndex: 'usedStatus', search: false,
      render: (_, record) => <Tag color={usedStatusMap[record.usedStatus].color}>{usedStatusMap[record.usedStatus].text}</Tag>,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 400,
      render: (_, record) => (
        <>
          <a onClick={() => { handleModify(record); }}> <EditOutlined/> 修改 </a>

          <Divider type="vertical" />
          <a onClick={() => { handleDelete(record) }}> <DeleteOutlined /> 删除 </a>

          <Divider type="vertical" />
          {
            record.usedStatus === 'YES' ? 
            (<a onClick={() => { handlePause(record); }}> <PlayCircleOutlined /> 停用 </a>) : 
            (<a onClick={() => { handleResume(record); }}> <PauseCircleOutlined /> 启用 </a>)
          }

          <Divider type="vertical" />
          <a onClick={() => { handleStartNow(record) }}> <RedoOutlined /> 执行一次 </a>
        </>
      ),
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="定时任务信息查询列表"
        rowKey="id"
        actionRef={actionRef}
        toolBarRender={() => [
          <Button type="primary" onClick={() => { handleRaise(); }}> 新建 </Button>,
        ]}
        request={(params) => page(params)}
        columns={columns}
        pagination={{ pageSize: 10 }}
      />

      {
        formVisible &&
        <SystemTaskForm 
          onSubmit={() => {
            handleFormVisible(false);
            if (actionRef.current) actionRef.current.reload();
          }}
          onCancel={() => {
            handleFormVisible(false);
          }}
          formVisible={formVisible}
          values={formValues}
        />
      }
    </PageContainer>
  );
};

export default SystemTask;
